<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: String,
  },
});
</script>

<template>
  <view class="upload-btn">
    <view class="upload-btn-wrapper">
      <image
        class="upload-btn-bg"
        src="@/package/guider/static/apply-edit-upload.png"
      />
      <image
        class="upload-btn-icon"
        src="@/package/guider/static/apply-edit-upload2.png"
      />
    </view>
    <view class="upload-btn-text">
      请上传导游证<text class="upload-btn-star">*</text>
    </view>
    <image
      class="upload-btn-img"
      v-if="modelValue"
      :src="modelValue"
      mode="aspectFill"
    />
  </view>
</template>

<style lang="scss">
.upload-btn {
  position: relative;

  .upload-btn-wrapper {
    position: relative;
    padding: 24rpx 0;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #f6f6f6;
  }

  .upload-btn-bg {
    display: block;
    width: 470rpx;
    height: 220rpx;
    margin: 0 auto;
  }

  .upload-btn-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108rpx;
    height: 108rpx;
    transform: translate(-50%, -50%);
  }

  .upload-btn-text {
    font-size: 30rpx;
    color: #666666;
    line-height: 60rpx;
    text-align: center;
    background-color: rgba(255, 121, 0, 0.09);
    border-radius: 0 0 20rpx 20rpx;
  }

  .upload-btn-star {
    font-size: 28rpx;
    color: #e02020;
    line-height: 40rpx;
  }

  .upload-btn-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }
}
</style>